<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<%@ include file="../../common/jsp/sheetHeader.jsp" %>
<style>
.ib_search_condition td{width:120px}
.ib_search_condition{border:1px solid #ADADAD}
.tit{text-align:right;background-color:#DAE8EC}
.r20{text-align:left}
</style>
<script>
$.fn.serializeObject = function() {
    var o = {};
//    var a = this.serializeArray();
    $(this).find('input[type="hidden"], input[type="text"], input[type="password"], input[type="checkbox"]:checked, input[type="radio"]:checked, select').each(function() {
        if ($(this).attr('type') == 'hidden') { //if checkbox is checked do not take the hidden field
            var $parent = $(this).parent();
            var $chb = $parent.find('input[type="checkbox"][name="' + this.name.replace(/\[/g, '\[').replace(/\]/g, '\]') + '"]');
            if ($chb != null) {
                if ($chb.prop('checked')) return;
            }
        }
        if (this.name !== null && this.name !== undefined && this.name !== ''){
        	var elemValue = null;
            if ($(this).is('select')) elemValue = $(this).find('option:selected').val();
            else elemValue = this.value;
            if (o[this.name] !== undefined) {
                if (!o[this.name].push) {
                    o[this.name] = [o[this.name]];
                }
                o[this.name].push(elemValue || '');
            } else {
                o[this.name] = elemValue || '';
            }
        }else if(this.id !== null && this.id !== undefined && this.id !== ''){
       	   var elemValue = null;
           if ($(this).is('select')) elemValue = $(this).find('option:selected').val();
           else elemValue = this.value;
           if (o[this.id] !== undefined) {
               if (!o[this.id].push) {
                   o[this.id] = [o[this.id]];
               }
               o[this.id].push(elemValue || '');
           } else {
               o[this.id] = elemValue || '';
           }        	
        	
        }
    });
    return o;
    }
	

	/*Sheet 각종 처리*/
	function doAction(sAction) {
		switch(sAction) {
			case "form2String":		
				var a = FormQueryStringEnc(document.frm);
				alert(a);
				break;
			case "form2Json":		
				var jsonObject = $( document.frm ).serializeObject();
				alert( JSON.stringify(jsonObject)   );
				break;
		}
	}
	
	
	
</script>
<title>폼 데이터 전송 예제</title>
</head>
<body>
<div id="main">
	<%@ include file="../../common/jsp/sheetNavi.jsp" %>	
	<div id="title">폼 데이터 추출 예제</div>
	<div id="desc">
		Form 안에 모든 element를 QueryString이나 Json 으로 추출해 본다.<br>
		<br>
		예)<br>
		//QueryString으로 추출<br>
		var qstring = FormQueryStringEnc(document.frm);<br><br>
		//JSON으로 추출(jquery를 이용)<br>
		var jsonObject = $( "#frm" ).serializeObject();<br>

	</div>

	<div id="functionArea">
	
	
	
	
	
	 
	 
	 
	 
	 
	 <form name="frm" id="frm">
	   <table class="ib_search_condition">
			<tr>
				<td class="tit">사번</td>
				<td class="r20"><input type="text" id="txtNo" style="text-align:center;width:85px"  value="9657014"/></td>
				<td class="tit">이름</td>
				<td class="r20"><input type="text" id="txtName" style="text-align:center;width:85px"  value="정현수" /></td>
				<td class="tit">성별</td>
				<td class="r20"><input type="radio" id="rdgender" value="M" checked/>남 <input type="radio" id="rdgender" value="F"/>여 </td>
				
			 </tr>
		
			<tr>
				<td class="tit">급여</td>
				<td class="r20"><input type="text" id="txtSalay" value="3,259,650" style="text-align:right;width:85px"  /></td>
				<td class="tit">수당</td>
				<td class="r20"><input type="text" id="txtExtSalay" style="text-align:right;width:85px" value="250,900" /></td>
				<td class="tit">성과급</td>
				<td class="r20"><input type="text" id="txtBonus" style="text-align:right;width:85px" value="129,000" /></td>
			</tr>
		
			<tr>
				<td class="tit">입사일</td>
				<td class="r20"><input type="text" id="txtDate"  style="text-align:center;width:85px"  value="2001-02-03"/></td>
				<td class="tit">직급</td>
				<td class="r20">
					<select id="sltPosition" class="selectbox"><!--class="fieldcombo"-->
						<option value="A">사원</option>
						<option value="B">대리</option>
						<option value="C" selected>과장</option>
						<option value="D">차장</option>
						<option value="E">부장</option>
					</select>
				</td>
				
				<td class="tit">호봉</td>
				<td class="r20">
					<select id="sltHoBong" class="selectbox"><!--class="fieldcombo"-->
						<option value="1">1호봉</option>
						<option value="2">2호봉</option>
						<option value="3">3호봉</option>
						<option value="4">4호봉</option>
						<option value="5" selected>5호봉</option>
					</select>
				</td>
			</tr>
		</table>
	 </form>
	 
	 
	 
	 
	 
	 
	 
	 
	 
	 
	 
	 
	 
	 
	 
	  
			   
			
	
	<br/>
	
	
	
	
	
	
	
	
	
	
	
	
	
	
		<div>
			<span>
				<input type="button" value="Form데이터 QueryString 추출" onclick="doAction('form2String')">
				<input type="button" value="Form데이터 JSON 추출" onclick="doAction('form2Json')">			
			</span>
		</div>
		
		
	</div>
	
	
</div>
</body>
</html>